<template>
  <el-config-provider :size="size" :z-index="zIndex" :locale="locale">
    <div class="common-layout">
      <el-container>
        <aside-menu />
        <el-container>
          <el-header class="el-header-demo">
            <type-menu />
          </el-header>
          <el-main class="main">
            <router-view />
          </el-main>
        </el-container>
      </el-container>
    </div>
  </el-config-provider>
</template>
  
<script>
import { defineComponent } from 'vue'
import { ElConfigProvider } from 'element-plus'
import TypeMenu from './components/frame/typeMenu.vue'
import AsideMenu from "./components/frame/asideMenu.vue"

export default defineComponent({
  components: {
    ElConfigProvider,
    TypeMenu,
    AsideMenu
  },
  setup() {
    return {
      zIndex: 3000,
      size: 'small'
    }
  },
})
</script>
  
<style>
.el-header {
  padding: 0 10px;
  background-color: #95106b;
}



.el-dropdown {
  color: #fff;
  line-height: 60px
}

.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: #fff;
  display: flex;
  align-items: center;
}

.el-select .el-input {
  margin-top: 16px;
}

.el-switch {
  margin-top: 16px;
  margin-left: 20px;
}

.el-menu-demo,
.el-header-demo {
  height: 40px;
}

.main {
  overflow: hidden !important;
  padding: 0 !important;
}
</style>
  